<template>
  <div class="search">
    <div class="address" @click="address">
      <span class="city">{{$store.state.locationCity}}</span>
      <i class="iconfont icon-icon--"></i>
    </div>
    <div class="searchBox">
      <p>
        <i class="iconfont icon-sousuo"></i>
        影片/影院/影人，任你搜
      </p>
    </div>
  </div>
</template>

<script>
import BMap from "BMap";
export default {
  name: "search",
  components: {},
  props: {},
  data() {
    return {
      // locationCity: "定位中",

    };
  },
  watch: {},
  computed: {},
  methods: {
    // 点击跳转
    address() {
      this.$router.push({
        path: "/address"
      });
    },
    // 定位城市
    getPosition() {
      var that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          // console.log(r);
          // console.log(r.address.city);
          let locationCity = r.address.city.substr(
            0,
            r.address.city.length - 1
          );
          that.$store.commit("setCity", locationCity);
          // console.log(locationCity);
        },
        { enableHighAccuracy: true }
      );
    },
    // 获取城市
    getCityData() {
      this.$http.get("/api/cityList").then(res => {
        console.log(res);
        let addAddressList = res.data.data.p;
        let hocCitys = addAddressList.slice(0, 9); // 热门城市

        let newArr = addAddressList.sort((a, b) => {
          a.pinyinFull = a.pinyinFull.replace(
            a.pinyinFull.charAt(0),
            a.pinyinFull.charAt(0).toUpperCase()
          );
          b.pinyinFull = b.pinyinFull.replace(
            b.pinyinFull.charAt(0),
            b.pinyinFull.charAt(0).toUpperCase()
          );
          return a.pinyinFull.localeCompare(b.pinyinFull);
        });
        console.log(newArr);
        let allCitys = this.twoArray(newArr); // 所有城市
        // 存储到本地
        localStorage.setItem("hotCitys", JSON.stringify(hocCitys));
        localStorage.setItem("allCitys", JSON.stringify(allCitys));
        localStorage.setItem("addAddressList", JSON.stringify(addAddressList));
      });
    },
    // 进行分类
    twoArray(arr) {
      let firstLetter = arr[0].pinyinFull.charAt(0);
      let itemArr = [];
      let result = [];
      let k = 0;
      arr.map(val => {
        if (val.pinyinFull.charAt(0) == firstLetter) {
          itemArr.push(val);
          result[k] = {
            title: firstLetter,
            list: itemArr
          };
        } else {
          firstLetter = val.pinyinFull.charAt(0);
          itemArr = [];
          itemArr.push(val);
          result[++k] = {
            title: firstLetter,
            list: itemArr
          };
        }
      });
      console.log(result);
      return result;
    }
  },
  created() {
    let cityList = localStorage.getItem("addAddressList");
    if (!cityList) {
      this.getCityData();
    }
  },
  mounted() {
    if(this.$store.state.locationCity == '定位中'){
      this.getPosition();
    }
    
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.search {
  width: 100%;
  background: #d8d8d8;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: vw(10) 0;
  border-bottom: 1px solid #d8d8d8;
  .address {
    width: vw(65);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: vw(16);

    .city {
      display: inline-block;
      width: vw(46);
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      color: #000;
    }
  }
  .searchBox {
    width: vw(268);
    height: vw(40);
    border: 1px solid #666;
    border-radius: vw(10);
    background: #fff;
    line-height: vw(35);
    p {
      padding-left: vw(20);
      color: #666;
      font-size: vw(16);
      i {
        font-size: vw(24);
      }
    }
  }
}
</style>